<script setup>
import { ref } from 'vue'
import { ElForm,ElFormItem,ElColorPicker,ElInputNumber } from 'element-plus'
const canvasdata = ref({
  width: 600,
  height: 480,
  backgroundColor: '#f5f5f5'
})

defineExpose({
  canvasdata: canvasdata.value
});
</script>

<template>
  <div class="_container_md">
    <el-form label-width="auto" style="max-width: 600px">
      <el-form-item label="宽度" label-position="left">
        <el-input-number v-model="canvasdata.width" :min="10" :max="2000" controls-position="right" />
      </el-form-item>
      <el-form-item label="高度" label-position="left">
        <el-input-number v-model="canvasdata.height" :min="10" :max="1000" controls-position="right" />
      </el-form-item>
      <el-form-item label="背景颜色" label-position="left">
        <el-color-picker v-model="canvasdata.backgroundColor" show-alpha />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss"></style>